<template>
  <div class="YPSMS" v-loading="isLoading">
    <div class="header">
      药品说明书
      <el-button
        type="success"
        style="float: right"
        icon="el-icon-s-home"
        circle
        @click="Home"
      ></el-button>
    </div>
    <div class="body">
      <div class="query">
        <el-input
          placeholder="请输入内容"
          v-model="query"
          @keyup.enter.native="getList"
          style="width: 90%"
        >
          <template slot="append"
            ><el-button icon="el-icon-search" @click="getList"></el-button
          ></template>
        </el-input>
        <el-button
          @click="Add"
          icon="el-icon-plus"
          type="primary"
          style="margin-left: 15px"
        ></el-button>
      </div>
      <div class="box_1">
        <el-table
          :data="tableData"
          style="width: 100%; margin-top: 15px"
          @row-click="open"
          :header-row-style="{ color: '#000', fontSize: '18px' }"
        >
          <el-table-column width="40" prop="" label="">
            <template>
              <i class="el-icon-s-opportunity" style="color: red"></i>
            </template>
          </el-table-column>
          <el-table-column prop="drugname" :label="query1 + '搜索结果'">
            <template slot-scope="scope">
              <span style="color: rgb(2, 70, 254)">{{
                scope.row.drugname
              }}</span>
            </template>
          </el-table-column>
          <el-table-column width="120" prop="" label="操作">
            <template slot-scope="scope">
              <el-button
                icon="el-icon-edit"
                @click.stop="edit(scope.row)"
                size="mini"
              ></el-button>
              <el-button
                icon="el-icon-delete"
                @click.stop="del(scope.row)"
                size="mini"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="list" v-if="false">
        <!-- <el-table
          :data="tableData"
          style="width: 100%"
          height="750"
          v-loading="isLoading"
        >
          <el-table-column prop="drugname" label="药品名称"> </el-table-column>
        </el-table> -->
        <span
          class="list_item"
          v-for="(item, index) in tableData"
          :key="index"
          @click="open(item)"
          >{{ item.drugname }}</span
        >
      </div>
      <div style="text-align: right; margin-top: 20px">
        共有 <span style="color: red">{{ pages.records }}</span> 条数据
      </div>
      <div style="text-align: center">
        <el-pagination
          background
          layout="prev, pager, next"
          :total.sync="pages.records"
          :page-size.sync="pages.size"
          :current-page="pages.page"
          @current-change="page_change"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 弹层 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="45%"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <div style="height: 600px; overflow: auto">
        <div v-for="item in info" :key="item.id" style="margin: 5px 0">
          <span style="font-weight: 700; width: 100px; display: inline-block"
            >{{ item.title }}：</span
          >
          <!-- <span
            v-if="!isFlag"
            v-html="item.context ? item.context : '暂无'"
          ></span> -->
          <el-input v-model="item.context"></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
        <el-button @click="btn_OK" type="primary">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "",
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      isLoading: false,
      query: "",
      query1: "",
      tableData: [],
      info: [],
      pages: {
        page: 1,
        size: 15,
        records: 0,
        total: 0,
      },
      dialogVisible: false,
      title: "",
      isFlag: false,
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {
    this.getList();
  },
  // 组件方法
  methods: {
    Home() {
      this.$router.push("/Home_Index_WH");
    },
    getList() {
      this.isLoading = true;

      var body = {
        page: this.pages.page,
        size: this.pages.size,
        param: this.query,
      };
      this.$post("/w/a/blList", body).then((res) => {
        this.tableData = res.data;
        this.pages.records = res.records;
        this.pages.total = res.total;
        this.query1 = this.query;
        this.isLoading = false;
      });
    },
    open(row) {
      this.isFlag = false;
      this.title = row.drugname;
      this.$post("/w/a/blDetail?inputNo=" + row.pzwh).then((res) => {
        this.info = res.data;
        this.dialogVisible = true;
      });
    },
    edit(row) {
      this.isFlag = true;
      this.title = row.drugname;
      this.$post("/w/a/blDetail?inputNo=" + row.pzwh).then((res) => {
        this.info = res.data;
        this.dialogVisible = true;
      });
    },
    del(row) {
      var body = {
        id: row.id,
      };
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$post("/api/bl/DeleteDetail", body).then((res) => {
            this.getList();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        })
        .catch(() => {});
    },
    handleClose() {
      this.dialogVisible = false;
    },
    page_change(val) {
      this.pages.page = val;
      this.getList();
    },
    getType1() {},
    Add() {
      this.info = [
        { title: "疾病名称", context: "" },
        { title: "来源", context: "" },
        { title: "患者信息", context: "" },
        { title: "临床检查", context: "" },
        { title: "诊断与治疗", context: "" },
        { title: "病例讨论与分析", context: "" },
        { title: "专家点评", context: "" },
        { title: "知识延展", context: "" },
        { title: "参考文献", context: "" },
      ];
      this.dialogVisible = true;
    },
    btn_OK() {
      console.log(this.info);
      var url = this.info[0].id
        ? "/api/bl/UpdateDetail"
        : "/api/bl/InsertDetail";
      this.$post(url, this.info).then((res) => {
        this.getList();
        this.handleClose();
        this.$message({
          type: "success",
          message: "操作成功!",
        });
      });
    },
  },
};
</script>

<style scoped lang="scss">
.YPSMS {
  background-color: rgb(255, 255, 230);
  width: 100vw;
  height: 100vh;
  .header {
    padding: 15px;
    font-size: 24px;
    font-weight: 700;
    color: rgb(143, 100, 57);
  }
  .body {
    width: 60%;
    margin: 0 auto;
    .box_items {
      display: inline-block;
    }
    .list {
      text-align: center;
    }
    .list_item {
      width: 170px;
      display: inline-block;
      padding: 6px 10px;
      color: rgb(143, 100, 57);
      font-weight: 700;
      border: 1px solid #000;
      margin: 10px;
      text-align: center;
      cursor: pointer;
    }
  }
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: rgb(143, 100, 57);
}
.el-icon-s-opportunity:before {
  color: rgb(2, 70, 254);
}
</style>
